<template>
  <div class="patient-management-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="就诊人管理" left-arrow @click-left="goBack">
      <template #right>
        <van-icon name="plus" size="18" @click="goToAddPatient" />
      </template>
    </van-nav-bar>

    <!-- 就诊人列表 -->
    <div class="patient-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell-group v-if="patients.length > 0">
            <van-cell
              v-for="patient in patients"
              :key="patient.patientId"
              :title="patient.name"
              :label="`${patient.relationship} | ${patient.phone}`"
              is-link
              @click="goToEditPatient(patient)"
              class="patient-item"
            >
              <template #right-icon>
                <div class="patient-actions">
                  <van-tag v-if="patient.isDefault" type="primary">默认</van-tag>
                  <van-icon name="edit" size="16" @click.stop="goToEditPatient(patient)" />
                  <van-icon name="delete" size="16" @click.stop="deletePatient(patient)" />
                </div>
              </template>
            </van-cell>
          </van-cell-group>
          
          <!-- 空状态 -->
          <van-empty v-else description="暂无就诊人信息" />
        </van-list>
      </van-pull-refresh>
    </div>

    <!-- 添加按钮 -->
    <div class="add-button-container">
      <van-button
        type="primary"
        size="large"
        round
        @click="goToAddPatient"
        class="add-button"
      >
        添加就诊人
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Toast, Dialog } from 'vant'
import { api, type Patient } from '@/api'

const router = useRouter()

// 状态
const patients = ref<Patient[]>([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

// 事件处理
const goBack = () => {
  router.back()
}

const goToAddPatient = () => {
  router.push('/patient/add')
}

const goToEditPatient = (patient: Patient) => {
  router.push(`/patient/edit/${patient.patientId}`)
}

const deletePatient = async (patient: Patient) => {
  try {
    await Dialog.confirm({
      title: '确认删除',
      message: `确定要删除就诊人"${patient.name}"吗？`,
    })
    
    await api.deletePatient(patient.patientId)
    Toast('删除成功')
    
    // 重新加载列表
    await loadPatients()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除就诊人失败:', error)
      Toast('删除失败')
    }
  }
}

// 数据加载
const loadPatients = async () => {
  try {
    const response = await api.getPatients()
    patients.value = response.data || []
  } catch (error) {
    console.error('获取就诊人列表失败:', error)
    Toast('获取就诊人列表失败')
  }
}

const onLoad = async () => {
  if (loading.value) return
  
  loading.value = true
  try {
    await loadPatients()
    finished.value = true
  } catch (error) {
    console.error('加载失败:', error)
  } finally {
    loading.value = false
  }
}

const onRefresh = async () => {
  refreshing.value = true
  try {
    await loadPatients()
  } catch (error) {
    console.error('刷新失败:', error)
  } finally {
    refreshing.value = false
  }
}

onMounted(() => {
  loadPatients()
})
</script>

<style scoped>
.patient-management-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.patient-list {
  padding: 0 16px;
}

.patient-item {
  margin-bottom: 8px;
  border-radius: 8px;
}

.patient-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.patient-actions .van-icon {
  color: #1989fa;
  cursor: pointer;
}

.patient-actions .van-icon:last-child {
  color: #ee0a24;
}

.add-button-container {
  position: fixed;
  bottom: 20px;
  left: 16px;
  right: 16px;
  z-index: 100;
}

.add-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #1989fa 0%, #1976d2 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
}

.add-button:active {
  opacity: 0.8;
}

/* 空状态样式 */
:deep(.van-empty) {
  padding: 60px 20px;
}

:deep(.van-empty__description) {
  color: #969799;
  font-size: 14px;
}
</style>

